<template>
	<view class="">
		<cu-custom bgColor="bg-white" :isBack="true" :isTitle="false" class="fixed">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>


		<ShowUpload :progress="progress" @closeUpload="closeUpload" v-if="progress!=0"></ShowUpload>


		<view class="padding-sm fixed middle text-white topTip margin-tb" :style="{top:topH+'px'}">
			点击中间裁剪框可查看裁剪后的图片
		</view>

		<imageCropper id="image-cropper" :imgSrc="src" @load="cropperload" @imageload="loadimage" :disable_width="sw.w"
			:disable_height="sw.h" :disable_ratio="sw.bili" :disable_rotate="sw.rotate" :limit_move="sw.move"
			ref="cropper" @tapcut="clickcut">
		</imageCropper>




		<view class="contol flex flex-wrap text-white">

			<view class="margin-xll control-item flex-wrap flex ">
				<view class="switch-box">
					锁定裁剪宽 <switch id="switch" class="blue" @change="lock($event,'w')" :checked="sw.w" color="blue"
						style="margin-left: 1vw;"></switch>
				</view>
				<view class="switch-box">
					锁定裁剪高 <switch id="switch" class="blue" @change="lock($event,'h')" :checked="sw.h" color="blue"
						style="margin-left: 1vw;"></switch>
				</view>

				<view class="switch-box">
					锁定比列 <switch id="switch" class="blue" @change="lock($event,'bili')" :checked="sw.bili" color="blue"
						style="margin-left: 1vw;"></switch>
				</view>
				<view class="switch-box">
					锁定旋转 <switch id="switch" class="blue" @change="lock($event,'rotate')" :checked="sw.rotate"
						color="blue" style="margin-left: 1vw;"></switch>
				</view>
				<!-- 	<view class="switch-box">
					限制移动 <switch id="switch" class="blue" @change="lock($event,'move')" :checked="sw.move" color="blue"
						style="margin-left: 1vw;"></switch>
				</view> -->

			</view>

			<view class="margin-xll control-item">
				<view class="cu-btn bg-white sm" @click="changeImg('up')">
					上
				</view>
				<view class="cu-btn bg-white sm" @click="changeImg('down')">
					下
				</view>
				<view class="cu-btn bg-white sm" @click="changeImg('left')">
					左
				</view>
				<view class="cu-btn bg-white sm" @click="changeImg('right')">
					右
				</view>
				<view class="cu-btn bg-white sm" @click="scale('max')">
					放大
				</view>
				<view class="cu-btn bg-white sm" @click="scale('min')">
					缩小
				</view>
				<view class="cu-btn bg-white sm" @click="scale('rotate')">
					旋转
				</view>
				<view class="cu-btn bg-white sm" @click="saveImg()">
					保存
				</view>
				<view class="cu-btn bg-white sm" @click="sumbitImg()">
					确定
				</view>

			</view>
		</view>



	</view>
</template>

<script>
	import imageCropper from "@/wxcomponents/image-cropper/image-cropper.js"
	import ShowUpload from "../../components/upload.vue"
	let uploadTask = null;
	export default {
		components: {
			imageCropper,
			ShowUpload
		},

		data() {
			return {
				title: "裁剪",
				src: '',
				width: 250, //宽度
				height: 250, //高度
				topH: 0,
				sw: {
					w: false,
					h: false,
					bili: false,
					rotate: false,
					move: true,
					scaleNUm: 1,
					angle: 0,

				},
				type: -1,
				info: {

				},
				progress: 0,
				serverUrl: this.apiHost + '/comm/imageUp',

			}
		},
		onLoad(option) {
			this.cropper = this.selectComponent("#image-cropper");
			this.src = option.src;
			this.type = option.type;
			console.log("src" + this.src);
			if (this.type == "image") {
				this.info = JSON.parse(option.data);
				this.info.shop_id = option.shop_id;
			}


			uni.showLoading({
				title: "加载中..."
			})


		},
		mounted() {
			this.getInfo().then((e) => {
				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height) - 50;
				this.boxTop = e.custom.top + e.custom.height;
				this.topH = e.custom.top + e.custom.height;
			});
		},
		methods: {
			cropperload(e) {

			},
			//取消上传
			closeUpload(type) {
				switch (type) {
					case "cancel":
						uploadTask.abort();
						this.progress = 0;
						uploadTask = null;
						break;
				}


			},
			loadimage(e) {
				uni.hideLoading();
				this.cropper.imgReset();
			},
			clickcut(e) {
				uni.previewImage({
					current: e.detail.url,
					urls: [e.detail.url]
				})
			},
			changeImg(type) {
				let x = 0,
					y = 0;
				switch (type) {
					case "up":
						y = -1;
						break;
					case "down":
						y = 1;
						break;

					case "left":
						x = -1;
						break;

					case "right":
						x = 1;
						break;

				}
				this.$refs.cropper.setCutXY(x, y);
			},
			scale(type) {
				let max = 3,
					min = 0.5;
				let scale = this.sw.scaleNUm;
				switch (type) {
					case "max":
						scale += 0.5;
						if (max >= scale && min <= scale) {
							this.sw.scaleNUm = scale;
							this.$refs.cropper.setScale(this.sw.scaleNUm);
						}
						break;
					case "min":
						scale -= 0.5;

						if (max >= scale && min <= scale) {
							this.sw.scaleNUm = scale;
							this.$refs.cropper.setScale(this.sw.scaleNUm);
						}
						break;

					case "rotate":
						this.sw.angle += 10;

						this.$refs.cropper.setAngle(this.sw.angle);
						break;

				}
			},
			//上传图片
			upload(path) {
				return new Promise((resolve, reject) => {
					uploadTask = uni.uploadFile({
						url: this.serverUrl,
						fileType: 'image',
						name: 'upload-images',
						filePath: path,
						success: (uploadFile) => {
							if (uploadFile.statusCode == 200) {
								resolve(uploadFile.data);
								this.closeUpload("cancel");
							} else {
								this.closeUpload("cancel");
								this.showToast("上传出错，请稍后再试");
								reject();
							}
						},
						fail: (e) => {
							this.showToast("上传出错，请稍后再试");
							this.closeUpload("cancel");
							reject();
						}
					});
					uploadTask.onProgressUpdate((res) => {
						this.progress = res.progress;
					})
				})
			},

			showToast(content) {
				uni.hideLoading();
				uni.showToast({
					title: content,
					icon: "none"
				});

			},

			sumbitImg() {
				switch (this.type) {
					case "image":
						this.$refs.cropper.getImg((res) => {
							this.upload(res.url).then(r => {
								this.info.url = r;

								uni.navigateTo({
									url: "../order/orderSub?postInfo=" + JSON.stringify(this.info)
								})
							}, e => {

								this.closeUpload("cancel");

							})



						})
						break;

					default:
						this.$refs.cropper.getImg((res) => {
							let pages = getCurrentPages();
							let beforePage = pages[pages.length - 2];
							beforePage.$vm.update(res);
							uni.navigateBack({
								delta: 1
							})
						})
						break;
				}
			},
			saveImg() {
				this.$refs.cropper.getImg((res) => {
					uni.saveImageToPhotosAlbum({
						filePath: res.url,
						success: (e) => {
							let pages = getCurrentPages();
							let beforePage = pages[pages.length - 2];
							beforePage.$vm.update(res);
							uni.navigateBack({
								delta: 1
							})
						}
					})
				})
			},
			lock(e, type) {
				this.sw[type] = e.detail.value;
			}


		}



	}
</script>

<style scoped>
	.contol {
		width: 100vw;
		min-height: 50rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		margin-bottom: 15rpx;
	}

	.fixed {
		position: absolute;
		z-index: 99;
	}

	#image-cropper {
		z-index: 0;
	}

	.topTip {
		width: 100%;
	}

	.cu-btn {
		margin-left: 15rpx;
		margin-top: 10rpx;
	}

	.switch-box {
		margin-left: 10rpx;
		margin-top: 10rpx;
	}

	.control-item {
		margin: 10rpx;
	}

	#switch::after,
	#switch::before {
		font-family: "cuIcon";
		content: "";
		position: absolute;
		color: #ffffff !important;
		top: 0%;
		left: 0upx;
		font-size: 26upx;
		line-height: 26px;
		width: 50%;
		text-align: center;
		pointer-events: none;
		transform: scale(0, 0);
		transition: all 0.3s ease-in-out 0s;
		z-index: 9;
		bottom: 0;
		height: 26px;
		margin: auto;
	}
</style>
